<template>
  <el-form ref="formRef" :model="form" v-loading="loading">
    <pub-edit-description
      :ndColumns="2"
      style="margin-bottom: 30px"
      v-for="(item, index) in form.formArray"
      :key="index"
    >
      <pub-edit-description-item
        :span="1"
        required
        :label="item.type == 3 ? '按钮名称' : '菜单名称'"
      >
        <el-form-item
          :prop="'formArray.' + index + '.name'"
          :rules="$formRules.input"
        >
          <pub-input v-model="item.name" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="菜单排序" required>
        <el-form-item
          :prop="'formArray.' + index + '.sort'"
          :rules="$formRules.resourceSort"
        >
          <pub-input-number v-model="item.sort" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        :span="1"
        label="鉴权字符"
        required
        v-if="item.type == 3"
      >
        <el-form-item
          :prop="'formArray.' + index + '.frontendRouting'"
          :rules="$formRules.input"
        >
          <pub-input v-model="item.frontendRouting" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        :span="1"
        :label="item.type == 3 ? '按钮标识' : '路由标识'"
        required
      >
        <el-form-item
          :prop="'formArray.' + index + '.code'"
          :rules="$formRules.input"
        >
          <pub-input v-model="item.code" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        v-if="item.type != 3"
        :span="1"
        label="代码路径"
        required
      >
        <el-form-item
          :prop="'formArray.' + index + '.component'"
          :rules="$formRules.input"
        >
          <pub-input v-model="item.component" />
        </el-form-item>
      </pub-edit-description-item>

      <pub-edit-description-item
        :span="1"
        :label="item.type == 3 ? '按钮类型' : '菜单类型'"
        required
      >
        <el-form-item
          :prop="'formArray.' + index + '.type'"
          :rules="$formRules.select"
        >
          <pub-select-dict
            width="100%"
            v-model="item.type"
            dict-code="SYS_CDLX"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="平台类型" required>
        <el-form-item
          :prop="'formArray.' + index + '.platform'"
          :rules="$formRules.select"
        >
          <pub-select-dict
            width="100%"
            v-model="item.platform"
            dict-code="SYS_PTLX"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="显示当前菜单" required>
        <el-form-item
          :prop="'formArray.' + index + '.isDisplayInMainMenu'"
          :rules="$formRules.select"
        >
          <pub-select-dict
            width="100%"
            v-model="item.isDisplayInMainMenu"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        v-if="item.type == 2 || item.type == 3"
        :span="1"
        label="高亮标识"
      >
        <el-form-item :prop="'formArray.' + index + '.activeName'">
          <pub-input v-model="item.activeName" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        :span="1"
        label="页面缓存"
        required
        v-if="item.type != 3"
      >
        <el-form-item
          :prop="'formArray.' + index + '.keepAlive'"
          :rules="$formRules.select"
        >
          <pub-select-dict
            width="100%"
            v-model="item.keepAlive"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <!-- <pub-edit-description-item
        :span="1"
        label="是否可关闭"
        required
        v-if="item.type != 3"
      >
        <el-form-item
          :prop="'formArray.' + index + '.closeTab'"
          :rules="$formRules.select"
        >
          <pub-select-dict
            width="100%"
            v-model="item.closeTab"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item> -->
      <pub-edit-description-item
        :span="1"
        label="展示快捷标签"
        v-if="item.type != 3"
      >
        <el-form-item :rules="$formRules.select">
          <pub-select-dict
            width="100%"
            v-model="item.isShowHistoryTag"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="菜单图标">
        <el-form-item :prop="'formArray.' + index + '.icon'">
          <pub-input v-model="item.icon" />
          <div class="right-box">
            <span>自动生成图标：</span>
            <el-checkbox
              @change="
                val =>
                  val
                    ? (item.icon = pinyin.getFullChars(item.name).toLowerCase())
                    : (item.icon = '')
              "
              v-model="checked"
              value=""
              size="large"
            />
          </div>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        :span="1"
        label="是否全屏"
        required
        v-if="!isAddChild && item.type == 0"
      >
        <el-form-item
          :prop="'formArray.' + index + '.isFullScreen'"
          :rules="$formRules.select"
        >
          <pub-select-dict
            width="100%"
            v-model="item.isFullScreen"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        :span="1"
        label="左侧菜单功能"
        required
        v-if="isAddChild && item.type != 3"
      >
        <el-form-item
          :prop="'formArray.' + index + '.isShowLeftMenus'"
          :rules="$formRules.select"
        >
          <pub-select-dict
            width="100%"
            v-model="item.isShowLeftMenus"
            dict-code="ZDZT"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        :span="item.type == 2 ? 2 : 1"
        label="菜单重定向"
        v-if="item.type != 3"
      >
        <el-form-item :prop="'formArray.' + index + '.redirect'">
          <pub-input v-model="item.redirect" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="2">
        <div
          style="
            width: 100%;
            padding: 10px 0;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <el-icon
            v-if="form.formArray.length > 1"
            style="vertical-align: middle; margin-left: 15px; cursor: pointer"
            :size="20"
          >
            <Delete @click="delDict(index)" />
          </el-icon>
          <el-icon
            v-if="index == form.formArray.length - 1"
            style="vertical-align: middle; margin-left: 15px; cursor: pointer"
            :size="20"
          >
            <CirclePlus @click="addChildren" />
          </el-icon>
        </div>
      </pub-edit-description-item>
    </pub-edit-description>
  </el-form>
  <div class="dialog-footer-btn">
    <el-button type="default" @click="cancel">取消</el-button>
    <el-button
      v-hasPermissions="['basic:system:menus:save']"
      v-prevent-repeat-click
      type="primary"
      @click="submitForm(formRef)"
    >
      保存
    </el-button>
  </div>
</template>

<script setup>
import { add_menus_detail } from '@/api/system.js'
import $formRules from '@/utils/form-validate.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import pinyin from 'js-pinyin'
import { computed } from 'vue'

const emit = defineEmits(['cancel', 'success'])
const props = defineProps({
  isAddChild: {
    type: Boolean,
    default: false
  },
  currentPid: {
    type: [String, Number],
    default: ''
  },
  lastMenusPath: {
    type: String,
    default: ''
  },
  currentIndex: {
    type: Number,
    default: 0
  },
  currentType: {
    type: Number
  },
  currentPlatform: {
    type: [String, Number]
  }
})
const loading = ref(false)
const valueDisabled = ref(false)
const form = reactive({
  formArray: [
    {
      name: '',
      code: '',
      status: '',
      type: '',
      sort: null,
      method: '',
      icon: '',
      isDisplayInMainMenu: '',
      redirect: '',
      platform: ''
    }
  ]
})

const formRef = ref()
const addChildren = () => {
  if (props.isAddChild) {
    form.formArray.push({
      name: '',
      code: '',
      status: '',
      type: props.currentType == 3 ? 3 : '',
      pid: props.currentPid,
      method: '',
      icon: '',
      isDisplayInMainMenu: props.currentType == 3 ? 0 : 1,
      redirect: '',
      platform: props.currentPlatform,
      isShowLeftMenus: 1,
      closeTab: 1,
      isShowHistoryTag: 1,
      keepAlive: 1,
      sort: form.formArray[form.formArray.length - 1].sort + 1
    })
  } else {
    form.formArray.push({
      name: '',
      code: '',
      status: '',
      type: '',
      sort: null,
      method: '',
      icon: '',
      isDisplayInMainMenu: '',
      redirect: '',
      platform: ''
    })
  }
}
const delDict = index => {
  form.formArray.splice(index, 1)
}

const cancel = () => {
  emit('cancel', false)
}

const submitForm = formEl => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      loading.value = true
      const res = await add_menus_detail(form.formArray)
      if (res.succeed) {
        ElMessage.success(res.msg)
        emit('success')
      }
      loading.value = false
    } else {
      return false
    }
  })
}
const checked = ref(false)

const changeInitIcon = (val, icon) => {
  console.log(val)
  console.log(icon)
}

onMounted(() => {
  if (props.isAddChild) {
    form.formArray = [
      {
        name: '',
        code: '',
        status: '',
        type: '',
        sort: null,
        pid: props.currentPid,
        method: '',
        icon: '',
        isDisplayInMainMenu: '',
        redirect: '',
        platform: ''
      }
    ]
  }
  form.formArray[0].sort = props.currentIndex || null
  form.formArray[0].keepAlive = 1
  form.formArray[0].isDisplayInMainMenu = 1
  form.formArray[0].isShowLeftMenus = 1
  form.formArray[0].closeTab = 1
  form.formArray[0].isShowHistoryTag = 1
  form.formArray[0].platform = props.currentPlatform

  if (props.currentType == 3) {
    form.formArray[0].type = props.currentType
    form.formArray[0].isDisplayInMainMenu = '0'
    valueDisabled.value = true
  }
})
</script>

<style scoped>
.el-row {
  height: 134px;
  align-items: center;
  margin-bottom: 15px;
}
.el-col {
  height: 28px;
}

.form-item-btn-group .el-form-item__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.options {
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-top: 10px;
}
/* 弹窗提交时loading样式需占满整个弹窗 */
.el-loading-parent--relative {
  position: inherit !important;
}
.right-box {
  display: flex;
  align-items: center;
  height: 30px;
}
</style>
